<template>
  <div class="app-container">
    <SearchBar :options="options" @change="searchChange" />
    
    <!-- 统计信息 -->
    <div class="statistics-info">
      <div>
        <span class="fs-base fc-secondary mr5">待收</span>
        <el-text type="success" size="large">￥{{ amountTotalInfo.dueInTotalMoney }}</el-text>
      </div>
    </div>

    <!-- 表格区域 -->
    <el-table 
      :data="list" 
      :loading="loading" 
      border
      style="margin-top: 20px"
    >
      <el-table-column label="费用名称" prop="name" min-width="120" />
      <el-table-column label="入住人" prop="renterName" min-width="100" />
      <el-table-column label="联系方式" prop="contacts" min-width="120" />
      <el-table-column label="地址" min-width="180">
        <template #default="{ row }">
          {{ row.room?.buildingName }}{{ row.room?.name }}
        </template>
      </el-table-column>
      <el-table-column label="分组" prop="room.groupName" min-width="120" />
      <el-table-column label="操作人" prop="createBy" min-width="100" />
      <el-table-column label="金额" prop="money" min-width="120">
        <template #default="{ row }">
          <span class="text-success">+{{ row.money.toFixed(2) }}元</span>
        </template>
      </el-table-column>
      <el-table-column label="待收日期" prop="noticeDate" min-width="160" />
      <el-table-column label="状态" min-width="100">
        <template #default="{ row }">
          <span v-daysDiff="row.noticeDate"></span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleCollection(row)">收款</el-button>
          <el-button link type="primary" @click="handleCall">催缴</el-button>
          <el-button link type="primary" @click="handleRemove(row)">删除账单</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination
        v-show="total > 0"
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="val => { queryParams.pageSize = val; getList() }"
        @current-change="val => { queryParams.pageNum = val; getList() }"
      />
    </div>

    <!-- 弹窗组件 -->
    <BillCollectionDl 
      :visible="collectionVisible" 
      :info="currentBill" 
      type="collection" 
      @cancel="handleCollectionCancel" 
      @ok="handleCollectionOk" 
    />
    <BillCallDl ref="billCallRef" />
    <BillRemoveDl 
      :visible="removeBillVisible" 
      :info="currentBill" 
      @cancel="handleRemoveBillCancel" 
      @ok="handleRemoveBillOk" 
    />
  </div>
</template>

<style lang="scss" scoped>
.app-container {
  background-color: var(--el-bg-color);
  padding: 20px;
  border-radius: 4px;

  .statistics-info {
    background-color: var(--el-fill-color-blank);
    padding: 20px;
    border-radius: 4px;
    box-shadow: var(--el-box-shadow-light);
    margin: 20px 0;

    .fs-base {
      font-size: 14px;
    }

    .fc-secondary {
      color: var(--el-text-color-secondary);
    }
  }

  .el-table {
    border-radius: 4px;
    
    :deep(.el-table__header) {
      th {
        background-color: var(--el-fill-color-light);
        color: var(--el-text-color-regular);
        font-weight: 500;
      }
    }
  }

  .pagination-container {
    margin-top: 20px;
    padding: 10px 20px;
    text-align: right;
  }
}

.text-success {
  color: var(--el-color-success);
}
</style>

<script setup name="ReceivablesPane">
import SearchBar from '../component/searchBar.vue'
import BillCollectionDl from '@/components/BillCollectionDl/index.vue'
import BillCallDl from './billCallDl.vue'
import BillRemoveDl from '@/components/BillRemoveDl/index.vue'
import billApi from '@/api/room/bill'

const { proxy } = getCurrentInstance()

const options = ref({
  group: false,
  billDate: true,
  searchStr: true,
  date: true
})
const list = ref([])
const loading = ref(false)
const total = ref(0)
const amountTotalInfo = ref({})
const collectionVisible = ref(false)
const removeBillVisible = ref(false)
const currentBill = ref({})

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
})
const { queryParams } = toRefs(data)

/* 搜索栏变化 */
function searchChange(form) {
  loading.value = true
  queryParams.value = { ...queryParams.value, ...form }
  getList()
}

/* 打开收款弹窗 */
function handleCollection(row) {
  currentBill.value = { ...row }
  collectionVisible.value = true
}
function handleCollectionCancel() {
  collectionVisible.value = false
}
function handleCollectionOk(value) {
  let params = {
    billId: currentBill.value.billId,
    ...value,
    status: '2'
  }
  billApi.update(params).then(res => {
    proxy.$modal.msgSuccess('收款成功!')
    collectionVisible.value = false
    getList()
  })
}

/* 打开催缴弹窗 */
function handleCall() {
  proxy.$refs['billCallRef'].show()
}

/* 删除账单 */
function handleRemove(row) {
  currentBill.value = { ...row }
  removeBillVisible.value = true
}
function handleRemoveBillCancel() {
  removeBillVisible.value = false
}
function handleRemoveBillOk() {
  removeBillVisible.value = false
}

function getList() {
  loading.value = true
  billApi.getList({
    ...queryParams.value,
    status: '1',
  }).then(res => {
    list.value = res.data.rows
    total.value = res.data.total
    amountTotalInfo.value = res.data
  }).finally(() => {
    loading.value = false
  })
}

getList()
</script>
